<template>
  <div class="vuex-test">
    <h2>vuex测试-组件1</h2>
    <h3>全局的mapGetters</h3>
    <div>showTopActive---{{showTopActive}}</div>
    <h3>测试引用对象</h3>
    <div></div>
    <p>{{obj?.aaa}}</p>
    <el-button size="small"
      @click="setObj"
      plain>直接修改obj</el-button>
    <p>{{objItemx?.aaa}}</p>
    <el-button size="small"
      @click="setObjx"
      plain>直接修改obj2</el-button>
    <p>{{objItem2?.aaa}}</p>
    <el-button size="small"
      @click="setObj2"
      plain>mutations修改obj2</el-button>
    <h3>测试基础数据</h3>
    <p>{{strItem}}</p>
    <el-button size="small"
      @click="setNum"
      plain>mutations修改obj2</el-button>
  </div>
</template>

<script>
  import { mapGetters, mapMutations } from 'vuex';
  export default {
    name: 'vuextest',
    data() {
      return {
        obj: this.$store.state.testx.objItem
      };
    },
    computed: {
      // 用mapGetters需要在store里配置getters
      // 这是全局mapGetters的写法
      // ...mapGetters({ showTopActive: 'showTopActive' })
      ...mapGetters(['showTopActive']),

      // 设置了namespaced文件的mapGetters写法（mapMutations、mapActions类似）
      // 这种方式可以起别名
      // ...mapGetters({ objItem2: 'testx/objItem2', strItem: 'testx/strItem' }),
      // 这种写法看着更简练
      ...mapGetters('testx', ['strItem', 'objItemx', 'objItem2'])
    },
    methods: {
      // ...mapMutations('testx', ['setStrItem']),
      setObj() {
        // 开启严格模式直接改数据会报错
        // not mutate vuex store state outside mutation handlers
        this.obj.aaa = 100;
      },
      setObjx() {
        // 开启严格模式直接改数据会报错
        // not mutate vuex store state outside mutation handlers
        this.objItemx.aaa = 100;
      },
      setObj2() {
        this.$store.commit('testx/setObjItem2', { aaa: 101 });
      },
      setNum() {
        // this.setStrItem('dddd');
        this.$store.commit('testx/setStrItem', 'dddd');
      }
    }
  };
</script>

<style lang="scss" scoped>
  .vuex-test {
    position: relative;
  }
</style>


 